<template>
  <div class="app">
    <h1>count的值是：{{ count }}</h1>
    <h1>info对象：{{ info }}</h1>
    <button @click="addCount">+1</button>
    <button @click="changeInfo">改变info对象</button>
  </div>
</template>

<script>
/*
watch():侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
详细信息:
watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
第一个参数是侦听器的源。这个来源可以是以下几种：
  一个函数，返回一个值
  一个 ref
  一个响应式对象
  ...或是由以上类型的值组成的数组
第二个参数是在发生变化时要调用的回调函数:
  这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。
  当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

第三个可选的参数是一个对象，支持以下这些选项：
  immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
  deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
  flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
  onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。
*/
import {reactive, ref, watch} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    let count = ref(0);
    let info = reactive({
      name: "陶品奇",
      age: 22
    })
    const addCount = () => {
      count.value++
    }
    const changeInfo = () => {
      info.age++
    }

    watch(count, (value, oldValue) => {
      console.log(value, oldValue)
    })

    watch(()=>info,(value,oldValue)=>{
      console.log(value,oldValue)
    })

    watch(info, (value, oldValue) => {
      console.log(value, oldValue)
    },{deep:true,immediate:true})


    watch([count, info], (value, oldValue) => {
      console.log(value, oldValue)
    })

    return {
      count,
      info,
      addCount,
      changeInfo
    }
  }
}
</script>

<style lang="less"></style>
